<script setup>
  import { ref } from 'vue'

  import { useRouter } from 'vue-router'
  const router = useRouter()

  const username = ref('')
  const password = ref('')

  const login = () => {
    if (username.value === 'admin' && password.value === '123456') {
      alert('登录成功')
      localStorage.setItem('isLogin', 'true')

      router.push('/')
    } else {
      alert('用户名或者密码错误')
    }
  }
</script>

<template>
  <div>
    <h3>登录页</h3>
      用户名: <input type="text" v-model="username" placeholder="admin" /> <br />
  密 码: <input type="password" v-model="password" placeholder="123456" /> <br />
  <button @click="login">登录</button>
  </div>

</template>

<style scoped>
div {
  /* padding: 20px 10px 20px ; */
  width: 300px;
  height: 200px;
  margin: 20px auto;
  border: 1px solid #9c9c9c;
  background-color: #c7c7c7;
}
h3 {
  text-align: center;
}
button {
  margin: 20px 100px 0;
  width: 100px;
  height: 30px;
  background-color: #c7c7c7;


}


</style>
